<template>
  <div>
    <div style="width:90%">
      <el-input
        placeholder="请输入房间号查询"
        style="width: 300px "
        suffix-icon="el-icon-search"
        v-model="query.roomNo"
      ></el-input>
      <el-button type="primary" style="margin: 10px 10px" @click="handlesearch"
        >查找</el-button
      >
      <i class="el-icon-refresh-right" @click="initcheckInData">刷新</i>
      <el-button type="primary" style="float:right " @click="handlesearchNow"
        >只看当前</el-button
      >
    </div>
    <div>
      <el-table
        ref="singleTable"
        :data="checkInfo"
        stripe
        height="400"
        border
        style="width: 90%"
        @selection-change="handleSelectionChange"
        highlight-current-row
        @current-change="handleClickChange"
      >
        <el-table-column
          prop="checkinInforId"
          label="入住信息ID"
          width="100"
          fixed
        >
        </el-table-column>
        <el-table-column
          prop="room.roomType.roomTypeName"
          label="房间类型"
          width="150"
        >
        </el-table-column>
        <el-table-column prop="room.roomNo" label="房间号"> </el-table-column>
        <el-table-column prop="checkinDate" label="入住时间" width="200px">
        </el-table-column>
        <el-table-column prop="checkoutDate" label="退房时间" width="200px">
        </el-table-column>
        <el-table-column prop="status" label="入住状态" width="130px">
        </el-table-column>
        <el-table-column prop="roomPrice" label="房费"> </el-table-column>
        <el-table-column prop="cashPledge" label="押金"> </el-table-column>
        <el-table-column prop="remark" label="备注" width="200px">
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="150px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 设置分页开始 -->
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[5, 10, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- 设置分页结束 -->
    </div>
  </div>
</template>
<script>
import {
  listCheckinInfoPage,
  searchCheckinInfo,
  deleteCheckinInfo,
  listCheckinNowInfoPage
} from "../../api/checkin.js";
export default {
  name: "CheckInformation",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 当前页
      pageNum: 0,
      // 每页数据量
      pageSize: 0,
      //查询参数
      query: {
        pageSize: 5,
        pageNum: 1,
        checkinInforId: undefined,
        roomTypeName: undefined,
        roomNo: undefined,
        checkinDate: undefined,
        checkoutDate: undefined,
        roomState: undefined,
        cashPledge: undefined,
        remark: undefined
      },
      //查询房间入住信息参数
      checkInfo: [],
      dialogeditVisible: false
    };
  },
  mounted() {
    this.initcheckInData();
  },
  methods: {
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.initcheckInData();
    },
    handleCurrentChange(val) {
      this.query.pageNum = val;
      this.initcheckInData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleClickChange(val) {
      this.currentRow = val;
    },
    resetform() {
      this.query = {
        pageSize: 5,
        pageNum: 1,
        checkinInforId: undefined,
        roomTypeName: undefined,
        roomNo: undefined,
        checkinDate: undefined,
        checkoutDate: undefined,
        roomState: undefined,
        roomPrice: undefined,
        cashPledge: undefined,
        remark: undefined
      };
    },

    //查询入住信息
    handlesearch() {
      if (this.query.roomNo != null) {
        searchCheckinInfo(this.query.roomNo)
          .then(resp => {
            if (resp.data.code == "200") {
              this.checkInfo = resp.data.data;
              this.$message({
                type: "success",
                message: "查询成功!"
              });
            } else {
              this.$message.error(resp.data);
            }
          })
          .catch(error => {
            // 错误分为 status-请求错误 和 code-账号密码错误
            this.$message.error(error);
            console.log(error);
          });
      } else {
        this.$message({
          type: "success",
          message: "房号列表已刷新!"
        });
      }
      this.resetform();
    },
    //查询当前入住信息
    handlesearchNow() {
      this.loading = true;
      listCheckinNowInfoPage(this.query)
        .then(resp => {
          if (resp.data) {
            this.checkInfo = resp.data.list;
            this.total = resp.data.total;
            this.pageNum = resp.data.pageNum;
            this.pageSize = resp.data.pageSize;
            this.loading = false;
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
      this.loading = false;
    },
    //更新入住信息
    initcheckInData() {
      this.loading = true;
      listCheckinInfoPage(this.query)
        .then(resp => {
          console.log(resp.data);
          if (resp.data) {
            this.checkInfo = resp.data.data.list;
            this.total = resp.data.data.total;
            this.pageNum = resp.data.data.pageNum;
            this.pageSize = resp.data.data.pageSize;
            this.loading = false;
            console.log(resp.data);
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
      this.loading = false;
    },
    handleDelete(row) {
      this.$confirm("确定要删除该记录吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() =>
        deleteCheckinInfo(row.checkinInforId)
          .then(resp => {
            if (resp.data.code == "200") {
              this.initcheckInData();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            } else {
              this.$message.error(resp.data);
            }
          })
          .catch(error => {
            // 错误分为 status-请求错误 和 code-账号密码错误
            this.$message.error(error);
            console.log(error);
          })
      );
    }
  }
};
</script>

<style></style>
